<template>
  <div class="page">
    <div class="chat">
      <div class="header">
        <van-nav-bar
          title="标题"
          left-arrow
          :fixed="true"
          @click-left="onClickLeft"
          @click-right="onClickRight"
        >
          <template #right>
            <van-icon name="ellipsis" size="18" />
          </template>
        </van-nav-bar>
      </div>
      <!--聊天页面--->
      <div class="chat-message" ref="qwcontent">
        <ul>
          <li v-for="(chat, index) in chatList" :key="index">
            <div class="left-message" v-if="chat.to == $store.getters.userName">
              <div class="user-image">
                <van-image
                  width="40"
                  height="40"
                  radius="5"
                  :src="chat.userImageUrl"
                />
              </div>
              <div class="user-message left-message-text">
                <div class="bubble">
                  <i class="i"></i>
                  <div class="talk">
                    {{ chat.chat }}
                  </div>
                </div>
              </div>
            </div>
            <div class="right-message" v-else>
              <div class="user-message rigth-message-text">
                <div class="bubble">
                  <i class="i"></i>
                  <div class="talk">
                    {{ chat.chat }}
                  </div>
                </div>
              </div>
              <div class="user-image">
                <van-image
                  width="40"
                  height="40"
                  radius="5"
                  :src="chat.userImageUrl"
                />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="footer" :style="{ height: height + 'px' }">
        <van-field
          v-model="value"
          label=""
          placeholder="请输入用聊天内容按回车键发送"
          @keyup.enter.native="submit"
        />
        <van-row type="flex" justify="space-between" align="center">
          <van-col span="4"><van-icon name="phone-o"/></van-col>
          <van-col span="4"><van-icon name="photo-o"/></van-col>
          <van-col span="4"><van-icon name="video-o"/></van-col>
          <van-col span="4"><van-icon name="debit-pay"/></van-col>
          <van-col span="4"><van-icon name="smile-o"/></van-col>
          <van-col span="4"
            ><van-icon name="add-o" @click="showMore()"
          /></van-col>
        </van-row>
      </div>
      <van-popup
        v-model="show"
        position="bottom"
        :overlay="false"
        :style="{ height: '180px' }"
      >
        <van-grid square :border="false">
          <van-grid-item
            v-for="value in 8"
            :key="value"
            icon="photo-o"
            text="文字"
          /> </van-grid
      ></van-popup>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      chatList: [],
      show: false,
      height: 80
    };
  },
  mounted() {
    //隐藏底部导航栏
    this.$store.commit("hideTabBar");
    this.$store.commit("changeUnreadMessageCount", "");
    //获取聊天数据
    this.getchatList();
    //计算聊天窗口高度
    let chatHeight = document.documentElement.clientHeight - 46 - 80;
    this.$refs.qwcontent.style.height = chatHeight + "px";
  },
  updated() {
    let msg = this.$refs.qwcontent; // 获取对象
    msg.scrollTop = msg.scrollHeight; // 滚动高度
  },
  methods: {
    getchatList() {
      this.$api
        .getChatList({})
        .then(e => {
          console.log(e);
          if (e.result == "success") {
            this.chatList = e.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onClickLeft() {
      this.$router.push("/");
    },
    onClickRight() {},
    submit() {
      let obj = {
        userImageUrl: "https://img.yzcdn.cn/vant/cat.jpeg",
        chat: this.value,
        from: "张三",
        to: "李四"
      };
      this.chatList.push(obj);
      this.value = "";
      // 滚动
      // this.$nextTick(() => {
      //   setTimeout(() => {
      //     let msg = this.$refs.qwcontent; // 获取对象
      //     msg.scrollTop = msg.scrollHeight; // 滚动高度
      //   }, 10);
      // });
    },
    showMore() {
      this.show = !this.show;
      if (this.show) {
        this.height = 260;
      } else {
        this.height = 80;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.chat {
  .header {
    height: 46px;
    .van-nav-bar {
      background-color: #ffffff;
      /deep/ .van-icon {
        color: #2c3e50;
      }
    }
  }
  .chat-message {
    // height: 526px;
    overflow: auto;
    padding-bottom: 80px;
    background-color: #f7f8fa;
    ul {
      padding: 10px;
      li {
        padding: 10px 0px;
      }
      .left-message {
        display: flex;
        justify-content: flex-start;
        .left-message-text {
          max-width: 70%;
          .bubble {
            position: relative;
            top: 0px;
            left: 15px;
            border-radius: 10px;
            background-color: currentColor;
            color: #ffffff;
            .i {
              position: absolute;
              width: 12px;
              height: 10px;
              color: #ffffff;
              border-width: 0px 0px 9px;
              border-style: solid;
              border-color: transparent transparent currentcolor;
              right: 100%;
              top: 0px;
              border-radius: 0px 0px 0px 32px;
            }
            .talk {
              color: black;
            }
          }
        }
      }
      .right-message {
        display: flex;
        justify-content: flex-end;
        .rigth-message-text {
          max-width: 70%;
          .bubble {
            position: relative;
            top: 0px;
            right: 15px;
            border-radius: 10px;
            background-color: currentColor;
            color: #0084ff;
            .i {
              position: absolute;
              width: 12px;
              height: 10px;
              color: #0084ff;
              border-width: 0px 0px 9px;
              border-style: solid;
              border-color: transparent transparent currentcolor;
              left: 100%;
              top: 0px;
              border-radius: 0px 0px 32px;
            }
            .talk {
              color: white;
            }
          }
        }
      }
      .user-message {
        .talk {
          padding: 10px;
          font-size: 14px;
        }
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: white;
    .van-row {
      height: 36px;
      .van-col {
        text-align: center;
      }
    }
  }
}
</style>
